<template>
  <!--  地址灾害档案页面-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 条件筛选 -->
          <el-divider></el-divider>
          <div class="page_filter">
            <el-row :gutter="20" style="width: 100%" type="flex" justify="start">
              <el-col :span="4">
                <el-input v-model="form.queryString" clearable placeholder="输入地灾点编号/名称" style="width: 100%">
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-autocomplete
                  v-model="state"
                  clearable
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入路线名称或编号"
                  @change="handleChange"
                  @select="handleSelect"
                ></el-autocomplete>
<!--                <el-select v-model="form.roadId" filterable clearable placeholder="选择路线" style="width:100%">-->
<!--                  <el-option-->
<!--                    v-for="item in deptRoadList"-->
<!--                    :key="item.id"-->
<!--                    :label="item.name"-->
<!--                    :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
              </el-col>
              <el-col :span="4">
                <el-select v-model="form.riskLevel" clearable placeholder="风险等级" style="width: 100%">
                  <el-option
                    v-for="item in EnumDamageRiskLevelList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="form.warningLevel" clearable placeholder="监测预警等级" style="width: 100%">
                  <el-option
                    v-for="item in EnumWarningLevelList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="form.progress" clearable placeholder="治理进度" style="width: 100%">
                  <el-option
                    v-for="item in EnumProgressList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>

              </el-col>
              <el-col :span="2">
                <el-button
                  class="common_btn-defalut"
                  icon="el-icon-search"
                  @click="form.page = 1;queryList();">搜索
                </el-button>
              </el-col>
            </el-row>
          </div>
          <div class="page_main">
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <el-table
              :data="tableList"
              border>
              <el-table-column
                label="序号"
                fixed
                width="80">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column prop="damageNo" min-width="175" label="编号"></el-table-column>
              <el-table-column prop="name" min-width="190" show-overflow-tooltip label="地质灾害点名称"></el-table-column>
              <el-table-column prop="roadName" min-width="140" show-overflow-tooltip label="所属路线"></el-table-column>
              <el-table-column prop="deptName" min-width="120" show-overflow-tooltip label="养管单位"></el-table-column>
              <el-table-column prop="warningLevelName" min-width="135" label="预警等级">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.warningLevel| gradeDangerColor" style="color: white">
                    {{scope.row.warningLevelName}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="riskLevelName" min-width="145" label="风险等级">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.riskLevel| gradeDangerColor" style="color: white;cursor: pointer" @click="DamageChekDeatil(scope.row)">
                    {{scope.row.riskLevelName}}
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="progressName" min-width="150" label="治理进度">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.progress| gradeDangerColor" @click="progressCheckDetail(scope.row)" style="color: white;cursor: pointer">
                    {{scope.row.progressName}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="120">
                <template slot-scope="scope">
                  <button class="btn_edit" @click="handleStatus(scope.row)">查看动态</button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
                 :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
              :total="form.total">
            </el-pagination>
          </div>

          <!-- 操作记录-->
          <el-dialog :title="slopeName +'时间线'"
                     :visible.sync="isShowDialog"
                     :close-on-click-modal="true"
                     @open="init"
                     :close-on-press-escape="false" width="200px">
            <div style="height: 400px;overflow: auto;padding: 10px">
              <form-status ref="operation" :id="slopeId"></form-status>
            </div>
          </el-dialog>
          <!-- 手填内容展示-->
          <el-dialog
            :close-on-click-modal="false"
            :title="levelDialogTitle"
            :visible.sync="isShowLevelDialog"
            width="520px">
            <el-form label-position="right" label-width="150px" ref="form"  :model="currentRow">
              <el-form-item :label="currentRow.labelLevelName" prop="deptTreeId" style="margin-top: 20px">
                <p>{{currentRow.labelLevel}}</p>
              </el-form-item>
              <el-form-item :label="currentRow.labelExplanationName" prop="deptTreeId" style="margin-top: 20px">
                <p>{{currentRow.labelExplanation||'暂无说明'}}</p>
              </el-form-item>
            </el-form>
          </el-dialog>
          <x-loading v-show="isLoading"></x-loading>
        </div>
      </el-col>
    </el-row>
    <!--   养护工程实施进度详情 -->
    <el-drawer
      title="查看轨迹"
      :visible.sync="timeline"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="50%">
      <div class="demo-drawer__content time_line">
        <el-timeline style="height: 800px;overflow: auto">
          <el-timeline-item
            v-for="(item, index) in timelineData"
            :key="index"
            color="#0bbd87"
            :timestamp="item.createTime | formatTimer"
            placement="top">
            <el-card>
              <el-row :gutter="10">
                <el-col :span="8">
                  <p class="status">
                    <el-tag size="medium" :style="item.status | gradeStatusColor" effect="dark"
                            style="color: white">
                      {{item.statusName}}
                    </el-tag>
                  </p>
                  <p class="info">操作单位：{{item.companyName}}</p>
                  <p class="info" v-if="item.explanation">说明：{{item.explanation}}</p>
                </el-col>
                <!--相关文件和图片-->
                <el-col :span="8">
                  <el-alert
                    :closable="false" title="相关文件，可点击下载" type="info" show-icon>
                  </el-alert>
                  <a v-for="file in item.fileList" :key="file.url" style="color: #1990FE;text-align: left"
                     :href="constUrl + file.url"
                     :download="file.name">
                    <p style="font-size: 20px"><i class="el-icon-document"></i>
                      <span style="font-size: 12px">{{file.name}}</span>
                      <span v-if="file.info" style="font-size: 10px ;color: #8c939d">({{file.info}})</span></p>

                  </a>
                  <div style="color:grey;text-align: center;line-height: 50px" v-if="item.fileList.length < 1">
                    没有文件...
                  </div>
                </el-col>
                <el-col :span="8">
                  <el-alert
                    :closable="false" title="相关图片，可点击查看大图" type="info" show-icon>
                  </el-alert>
                  <el-image
                    style="width: 100px; height: 100px;cursor: pointer;border: 1px #a6a6a6 solid" :key="index"
                    v-for="(img,index) in item.picList"
                    :src="constUrl + img.url" @click="previewImg(index,item.picList)"
                    fit="fill"></el-image>
                  <div style="color:grey;text-align: center;line-height: 50px" v-if="item.picList.length < 1">
                    没有照片...
                  </div>
                </el-col>
              </el-row>

            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <picture-viewer ref="imageViewer"></picture-viewer>
    </el-drawer>

    <!--查看风险点-->
    <el-drawer  :title="showDetailTitle"
               :visible.sync="detailDrawer"
               custom-class="demo-drawer" size="50%">
      <div class="demo-drawer__content">
        <damage-detail ref="operation" :currentRow="currentRow" :template="currentRow.formList" :isLook="isLook"
                       @submit="submitDamage"></damage-detail>
      </div>
      <!--新增-->
    </el-drawer>
  </div>
</template>

<script>
import OrganizationTree from '@/components/organization-tree/all'
import XLoading from '@/components/animation/x-loading.vue'
import PictureViewer from "@/components/picture-viewer/index-name";
import { getDamageDetail} from '@/services/model/form';

import {
  getDamageStatusList
} from '@/services/model/damageReport'
import Format from '@/utils/format'
import ItemMixins from "./slope-modules/item.mixins";
import FormStatus from "./old-modules/form-damage-status";
import {
  getTimeTree,
} from '@/services/model/progress'
// 初始的搜索参数
import constUrl from '@/services/env'
import DamageDetail from "../form/damage_risk/modules/damage-risk-form-detail";
import Enums from '@/utils/enums'

export default {
  mixins: [ItemMixins,Enums],
  components: {OrganizationTree,FormStatus,XLoading,PictureViewer,DamageDetail},
  data() {
    return {
      //风险点
      isLook: true,
      isShowLevelDialog:false,
      detailDrawer: false,
      showDetailTitle:'',
      constUrl,
      //养护工程实施进度
      timeline:false,
      timelineData:[],
      levelDialogTitle:"",
      restaurants:[],
      state: '',
      timeout:  null,

      deptTree: {
        breadList: [],//面包屑
        deptTreeId: '',
      },
      slopeName: '',
      form: {
        page: 1,
        pageSize: 10,
        roadId: '',
      },
      // 接口正在加载
      isLoading: false,
      slopeId: '',
      tableList: [],
      isShowDialog: false, // 是否显示弹窗
      currentRow: {}, // 新增数据
      deptRoadList: [],
      EnumDamageRiskLevelList: [],
      EnumProgressList: [],
      EnumWarningLevelList: [],

    }
  },
  computed: {

  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
    },
    gradeStatusColor(val) {
      switch (val) {
        case null:
          return 'background-color:#9e9e9e'
        case 1:
          return 'background-color:#0073b7'
        case 2:
          return 'background-color:#03a9f4'
        case 3:
          return 'background-color:#ff851b'
        case 4:
          return 'background-color:#3f51b5'
        case 5:
          return 'background-color:#0073b7'
        case 6:
          return 'background-color:#0DC26B'
        default:
          return 'background-color:#9e9e9e'
      }
    },
    gradeDangerColor(val) {
      switch (val) {
        case null:
          return 'background-color:#9e9e9e'
        case 0:
          return 'background-color:#9e9e9e'
        case 1:
          return 'background-color:#0DC26B'
        case 2:
          return 'background-color:#0073b7'
        case 3:
          return 'background-color:#f39c12'
        case 4:
          return 'background-color:#ff851b'
        case 5:
          return 'background-color:#e43321'
        default:
          return 'background-color:#e43321'
      }
    },
  },
  methods: {
    //查看风险点详情
    async DamageChekDeatil(row) {
      if(row.riskLevel==0){
        return
      }
      if (!row.riskOrderId) {
        this.levelDialogTitle='风险点调查'
        this.isShowLevelDialog = true
        this.currentRow.labelLevelName = '风险点调查等级：'
        this.currentRow.labelExplanationName = '风险点调查说明：'
        this.currentRow.labelLevel = row.riskLevelName
        this.currentRow.labelExplanation = row.riskOrderExplanation
      } else {
        this.showDetailTitle = '风险点调查记录详情'
        this.detailDrawer = true
        this.isLook = true
        let detail = await getDamageDetail({id: row.riskOrderId})
        detail.data.riskLevel=row.riskLevel
        detail.data.riskLevelName=row.riskLevelName
        this.currentRow = detail.data
      }

    },

    submitDamage() {
      this.currentRow = {};
      this.detailDrawer = false
      this.queryList()
    },
    // 查看大图
    previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls));
      urlList.map((x) => {
        x.url = this.constUrl + x.url;
        return x;
      });
      // 显示照片查看器
      this.$refs.imageViewer.showViewer(urlList, index);
    },
    //养护工程实施进度详情
    async progressCheckDetail(row) {
      if(row.progress==0){
        return
      }
      if (!row.progressOrderId) {
        this.levelDialogTitle='养护工程实施'
        this.isShowLevelDialog = true
        this.currentRow.labelLevelName = '养护工程实施等级：'
        this.currentRow.labelExplanationName = '养护工程实施说明：'
        this.currentRow.labelLevel = row.progressName
        this.currentRow.labelExplanation = row.progressExplanation
      } else {
        let {data} = await getTimeTree({id: row.progressOrderId})
        this.timelineData = data || []
        this.timeline = true
      }

    },
    init() {
      this.$nextTick(() => {
        this.$refs.operation.getInvestigateOperation(this.slopeId)
      })
    },
    handleStatus(row) {
      this.isShowDialog = true
      this.slopeName = row.name
      this.slopeId = row.id
    },
    //面包屑跳转
    breadClick(deptTreeId) {
      this.$refs.deptTree.changeBread(deptTreeId)
    },
    //组织机构组件回调
    selectOrgHandel() {
      this.$forceUpdate()
      this.form.deptTreeId = this.deptTree.deptTreeId
      this.queryList()
      this.changeDept()
    },
    querySearchAsync(queryString, cb) {
      var restaurants
      if(!queryString){
        restaurants = [];
      }else {
        restaurants = this.restaurants;

      }
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 10 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >-1);
      };
    },
    handleSelect(item) {
      this.form.roadId=item.id
      this.changeRoad()
    },
    handleChange(item){
      if(item==''){
        this.form.roadId=''
      }
    },
    //获取路线列表
    async changeDept() {
      this.deptRoadList = await this.getRoadListByDept(this.form.deptTreeId);
      let data=[]
      this.deptRoadList.map(x=>{
        data.push({
          id:x.id,
          value:x.name,
          name:x.name
        })
      })
      this.restaurants=data
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    async queryList() {
      this.isLoading = true
      // 先根据选择设置查询参数
      let res = await getDamageStatusList(this.form)
      if (res.code === 200) {
        this.tableList = res.data?.records || []
        this.form.total = Number(res.data?.total)
      }
      this.isLoading = false
    },
  },
  mounted() {
    // 启用状态枚举
    this.queryDictList([ 'EnumProgress', 'EnumDamageRiskLevel',  'EnumWarningLevel'], [ 'EnumProgressList','EnumDamageRiskLevelList', 'EnumWarningLevelList']);
    // this.queryList()
  },
  activated() {

  }
}
</script>
<style scoped="scoped" lang="less">
  .build_button_view .el-button--default {
    background-color: #1990FE !important;
    color: white !important;
  }

  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        width: 100%;
        height: 50px;
        padding: 0;
        padding-left: 20px;

      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  /deep/ .build_button_view .el-button--default {
    background: #1990FE !important;
  }

  .page .page_filter::after {
    height: 0px !important
  }
</style>
